在正式開始接觸 React 之前，我想先從自己比較熟悉的 Vue 出發，看看這兩個同樣都能拿來開發前端的技術，到底有什麼不同。
一開始學習時接觸較多的是 Vue ，所以相對的我也比較習慣 .vue 檔案的結構。畫面通常會放在 <template>，JavaScript 邏輯則寫在 <script setup>，如果需要控制畫面的顯示、列表或事件，也會搭配 v-if、v-for、@click 這些 Vue 提供的語法。

所以第一次看到 React 的程式碼時，我最明顯的感覺反而是：
怎麼好像很多東西都直接寫進 JavaScript 裡了？
例如同樣只是要顯示一段文字，Vue 可能會寫成：

<script setup>
const message = 'Hello'
</script>

<template>
  <p>{{ message }}</p>
</template>

而 React 可能會寫成：

function App() {
  const message = 'Hello'

  return <p>{message}</p>
}

兩邊最後做到的事情其實一樣，都是把 message 顯示在畫面上，但寫法和閱讀方式卻有很明顯的差別。
Vue 對我來說比較像是先把「畫面」和「程式邏輯」分成不同區塊，再透過 Vue 提供的語法把兩者連接起來。
React 則是直接透過 JavaScript 的 function 來建立 Component，最後再由 function 回傳要顯示的畫面。

這也是我第一次感受到，雖然 Vue 和 React 都是在做前端元件化開發，但它們在「怎麼描述畫面」這件事情上的思考方式並不完全一樣。
另外一個讓我很有感的地方，是 React 很多時候會直接使用 JavaScript 原本就有的語法。

例如在 Vue 裡，如果要根據條件決定一段內容要不要顯示，可以使用：

<p v-if="isLogin">Welcome</p>

而 React 裡則可能會看到：

{isLogin && <p>Welcome</p>}

如果要將一組資料顯示成列表，Vue 常會使用 v-for：

<p v-for="user in users" :key="user.id">
  {{ user.name }}
</p>

React 則可能會直接使用 JavaScript 的 map()：

{users.map(user => (
  <p key={user.id}>{user.name}</p>
))}

目前暫時只是先建立一個我對 React 的初步印象。以現在的理解來說，我覺得 Vue 比較像是提供了一套屬於 Vue 的語法，讓我們透過這些規則去建立和控制畫面；React 則更常直接利用 JavaScript 本身的能力來處理畫面與邏輯。
我原本也以為學 React 會是重新學一套完全陌生的東西，但稍微看過之後，反而發現裡面其實還是存在很多以前接觸過的 JavaScript。
像是 function、陣列的 map()、條件判斷等，本身都不是 React 才有的概念，只是到了 React 裡之後，被放到了不同的使用情境裡。

這也讓我開始重新意識到一件事：
框架或工具可能會改變，但 JavaScript 的基礎並不會因此消失。

對現在的我來說，React 最陌生的地方不一定是「出現了多少全新的語法」，而是它把原本熟悉的 JavaScript 用在了和 Vue 不太一樣的地方。
所以比起急著記住每一種 React 寫法，我更想先理解它為什麼會選擇用這種方式來建立畫面，以及這樣的寫法和我過去習慣的 Vue 到底差在哪裡。

至少目前第一輪看下來，我對兩者的感覺可以先簡單整理成一句話：
Vue 比較像是在既有的 HTML 結構上加入一套自己的規則；React 則更像是把 JavaScript 直接帶進畫面之中。

雖然這目前只是我自己初步的理解，真正開始接觸更多 React 程式碼之後，這個印象也可能會慢慢被修正，甚至發現有些現在看起來很像的概念，其實背後的運作方式並不相同。
但對我來說，先從自己已經學過的 Vue 當作參照點，至少能讓 React 不再是一個完全陌生、只能重新背起的技術，而是可以一步一步拿既有的經驗去比較、理解，再慢慢建立新的觀念。